<template>
    <div class="scroll-tab-box">
        <div class="tab-left">
            <div class="tab-list" :class="tabIndex === i ? 'pitch' : ''" v-for="(item, i) in list" :key="i" @click="goPageView(i)">{{ item }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => [],
        },
        index: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            tabIndex: 0,
        };
    },
    watch: {
        index(n) {
            this.tabIndex = n;
        },
    },
    methods: {
        goPageView(i) {
            this.tabIndex = i;
            this.$emit("goView", i);
        },
    },
};
</script>

<style lang="less" scoped>
.scroll-tab-box {
    padding-bottom: 30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tab-left {
        display: flex;
        .tab-list {
            cursor: pointer;
            color: #ccc;
            margin-right: 20rem;
        }
        .pitch {
            color: #000;
        }
    }
}
</style>
